@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;

    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;

    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;

    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;

    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;

    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;

    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

html {
  @apply scroll-smooth accent-primary;
}

a:hover,
a:focus {
  text-decoration: underline;
}

h1[id],
h2[id],
h3[id],
h4[id],
h5[id],
#content {
  @apply scroll-mt-20 lg:scroll-mt-24;
}

/* Markdown Styling */
.markdown {
  @apply flex w-full flex-col items-start justify-start   leading-relaxed text-slate-900 selection:bg-slate-200 selection:text-slate-500 dark:text-slate-100 dark:selection:bg-slate-100 dark:selection:text-slate-900;
}
.markdown h1 {
  @apply mt-8 mb-4 text-3xl font-extrabold;
}
.markdown h2 {
  @apply mt-8 mb-4 text-2xl font-semibold;
}
.markdown h3 {
  @apply mt-4 mb-2 text-xl font-semibold;
}
.markdown h4 {
  @apply mt-2 mb-1 text-base font-medium;
}
.markdown li {
  @apply list-disc text-slate-900 dark:text-white;
}
.markdown ol > li {
  @apply mb-2 list-decimal;
}
.markdown p {
  @apply mb-4 dark:text-white;
}
.markdown a > p {
  @apply mb-0 text-sm;
}
.markdown a:not(.heading-link--hidden---effects) {
  @apply text-slate-500 underline decoration-slate-500 
          decoration-dotted underline-offset-2  
          hover:text-slate-700 dark:text-slate-200 
          dark:decoration-slate-200 dark:hover:text-slate-300;
}

:is([dir="rtl"]) .markdown a[rel~="noreferrer"] > span {
  @apply inline-flex -scale-x-100;
}

.markdown code {
  @apply break-words [direction:ltr] [unicode-bidi:embed] lg:break-normal;
}

.markdown .code-wrapper {
  @apply inline rounded border border-slate-200 bg-slate-200/40 px-0.5 py-[0.5px] dark:border-slate-400/30 dark:bg-slate-400/20;
}

.markdown .remark-code-title {
  @apply z-10 -mb-1 mt-3 w-full rounded-t-md border border-slate-300/80 bg-[#191724] px-2 py-1 font-mono text-slate-200;
}

.markdown pre {
  @apply mx-auto mb-3 rounded border border-slate-300/80 p-2 pl-3 font-mono shadow-xl sm:pt-2;
}

.markdown ol {
  @apply w-full;
}

.markdown details {
  @apply mt-2 w-full rounded-md border border-slate-300/80 bg-[#191724] px-3 transition-all duration-300 ease-in-out;
}
.markdown details[open] {
  @apply bg-slate-200/10;
}
.markdown details pre {
  @apply border-0 shadow-none;
}
.markdown details > summary {
  @apply cursor-pointer text-[#A6ACCD];
}
.markdown summary {
  @apply py-3;
}

.markdown p > img {
  @apply mt-8 text-sm;
}
.markdown table > tbody > tr > td > a {
  overflow-wrap: anywhere;
}
.markdown table {
  @apply max-w-full table-fixed;
}
.markdown table > tbody > tr > td {
  @apply align-top;
}
.markdown blockquote a {
  @apply text-slate-900 dark:text-slate-50;
}
.DocSearch-SearchBar {
  @apply my-3 rounded-md bg-purple-400 p-2 text-sm;
}

#DocSearch-SearchBar {
  @apply my-3 rounded-md bg-purple-400 p-2 text-sm;
}

.embed {
  @apply relative mb-2 h-0 w-full pb-[56.25%];
}

.embed iframe {
  @apply absolute top-0 left-0 h-full w-full;
}
